<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片选项卡切换</title>
    <style>
        *{padding: 0;margin: 0}
        li{list-style: none;}
        #box{
            position:relative;
            width: 600px;
            margin: 100px auto;
        }
        #tab li{
            float: left;
            width: 120px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background:#000;
            color: #fff;
            cursor: pointer;
        }
        #tab li.on{
            background:#ff6600;
        }
        #pic{
            position:relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
        }
        #pic li{
            position:absolute;
            display: none;
        }
        #pic li.cur{
            position:absolute;
            display: block;
        }
        #count li:first-child{
            position: absolute;
            top:30px;
            left: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: rgba(0,0,0,0.6);
            color: #fff;
        }
        #count li:last-child{
            position: absolute;
            bottom:0px;
            left: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: rgba(0,0,0,0.6);
            color: #fff;
        }
        #btnLeft,#btnRight{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            left: 0;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 24px;
            background: rgba(0,0,0,0.6);
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
        }
        #btnRight{
            left: 100%;
            transform: translateX(-100%);
        }

    </style>
</head>
<body>
<div id="box">
    <ul id="tab">
        <li class="on">循环切换</li>
        <li>单边切换</li>
    </ul>
    <div id="wrap">
        <ul id="pic">
            <li class="cur"><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/6.jpg" alt=""></li>
        </ul>
        <ul id="count">
            <li> <span >1</span> / 6 </li>
            <li>第  <span>一</span> 张图片</li>
        </ul>
        <ul id="btn">
            <div id="btnLeft"> &lt; </div>
            <div id="btnRight"> &gt; </div>
        </ul>
    </div>
</div>

<script>
 var oTab = document.querySelectorAll('#tab li'),
         countTop = document.getElementById('countTop'),
         countBottom = document.getElementById('countBottom'),
         pre = document.getElementById('btnLeft'),
         next = document.getElementById('btnRight'),
         count = document.querySelectorAll('#count  span'),
         oPic = document.querySelectorAll('#pic li'),
         num = ['一','二','三','四','五','六']
         lens = oPic.length,
         i = 0,
         flag = true;

 oTab[0].onclick = function () {
     this.className = 'on';
     oTab[1].className = '';
     flag = true;
 }

 oTab[1].onclick = function () {
     this.className = 'on';
     oTab[0].className = '';
     flag = false;
 }
 next.onclick = function () {
     oPic[i].className = '';
     i++;
     if ( i > lens - 1 ){
         if (flag){
             i=0;
         }else{
             i=lens-1;
             alert("这是最后一位美女了！")
         }
     }
     oPic[i].className = 'cur';
     count[0].innerText = i+1
     count[1].innerText =  num[i]

 }
 pre.onclick = function () {
     oPic[i].className = '';
     i--;
     if ( i < 0 ){
         if (flag){
             i=lens-1
         }else{
             i=0
             alert("这是第一位美女了！")
         }
     }
     oPic[i].className = 'cur';
     count[0].innerText = i+1
     count[1].innerText = num[i]
 }
</script>
</body>
</html>